import { useNavigate } from 'react-router-dom'
import banner from '../assets/images/001.webp'
import banner2 from '../assets/images/002.webp'
import banner3 from '../assets/images/003.webp'
import banner4 from '../assets/images/004.webp'
import banner5 from '../assets/images/005.webp'
//封装组件
function Item(){
    const nav =useNavigate()
    const goDetail=()=>{
     nav('/detail')
    }
    const list=[
        {
            src:banner,
            info:'当地网红地打卡盘点'
        },
        {
            src:banner2,
            info:'当地网红地打卡盘点'
        },
        {
            src:banner3,
            info:'当地网红地打卡盘点'
        },
        {
            src:banner4,
            info:'当地网红地打卡盘点'
        },
        {
            src:banner5,
            info:'当地网红地打卡盘点'
        },
        
    ]
    return (
        <div>
        {/* 列表循环 */}
        {
            list.map((v,i)=>{
              return <div key={i} onClick={goDetail}>
                <img src={v.src} alt="" style={{width:'100%',height:'200px'}}/>
               <p>{v.info}</p>
              </div>
            })
        }
        </div>
    )
}
export default Item